<template>
  <view>
    <view
      v-for="item in paperItem.exam_option"
      :key="item.key"
      class="options-item"
      :class="[submitStatus(item)]"
      @click="onSelect(item)"
    >
      <view class="option-select iconfont" :class="[judgeSelect(item)]"></view>
      <text class="option-lable">{{ item.key }}.</text>
      <!-- <rich-text class="rich-text" :nodes="item.value"></rich-text> -->
      <mp-html class="rich-text" :content="item.value" />
    </view>
  </view>
</template>

<script>
import config from '@/uni_modules/sv-exam-plus/config.js'
import { arrEqual } from '@/uni_modules/sv-exam-plus/utils/index.js'
import store from '@/uni_modules/sv-exam-plus/store/index.js'

export default {
  props: {
    // 题目数据
    paperItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      config, // 兼容写法，需要先声明否则报错
      selected: [], // 未开启多选时，只保留一个元素
      correct: false // 初始化正确与否
    }
  },
  computed: {
    examType: {
      set(newType) {
        store.commit('updateType', newType)
      },
      get() {
        return store.state.examType
      }
    },
    isMultiple() {
      return this.paperItem.exam_type == '1'
    }
  },
  watch: {
    paperItem: {
      handler(newData) {
        this.selected = newData.selected || []
        this.correct = newData.correct ? true : false
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.selected = this.paperItem.selected || []
      this.correct = this.paperItem.correct ? true : false
    },
    onSelect(e) {
      // 若已提交，则无法再进行选择
      if (this.paperItem.submit) return

      if (this.isMultiple) {
        /**
         * 多选
         * 若selected中已包含e.key选项，则移除，否则添加
         */
        this.selected = this.selected?.includes(e.key)
          ? this.selected?.filter((item) => item !== e.key)
          : [...this.selected, e.key]
      } else {
        /**
         * 单选
         * 只保留最后一个元素
         */
        this.selected = [e.key]
      }

      /**
       * 比对答案
       * 比较answer与selected中元素是否相同(不考虑顺序)
       */
      this.correct = arrEqual(this.paperItem.exam_answer, this.selected)

      this.$emit('change', { selected: this.selected, correct: this.correct })
    },
    /**
     * 计算提交结果状态
     * 若答对，则只显示正确状态，若答错，则显示正确状态和错误状态
     */
    submitStatus(item) {
      if (this.paperItem.submit) {
        if (this.correct) {
          return this.paperItem.exam_answer?.includes(item.key) ? 'correct-bg' : ''
        } else {
          return this.paperItem.exam_answer?.includes(item.key) ? 'correct-bg' : 'wrong-bg'
        }
      } else {
        return ''
      }
    },
    judgeSelect(item) {
      if (this.examType === this.config.examTypeDict[0]) {
        // 背题模式
        return this.paperItem.exam_answer?.includes(item.key)
          ? 'icon-correct primary-color'
          : 'icon-wrong error-color'
      }
      if (this.isMultiple) {
        // 多选 - 刷题模式/模拟考试
        return this.selected?.includes(item.key) ? 'icon-select primary-color' : ''
      } else {
        // 单选 - 刷题模式/模拟考试
        return this.selected && this.selected[0] === item.key ? 'icon-select primary-color' : ''
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/uni_modules/sv-exam-plus/icons/iconfont.css';

.options-item {
  display: flex;
  align-items: center;
  margin-bottom: var(--paper-unit-12);
  padding: var(--paper-unit-12);
  border-radius: calc(#{var(--paper-unit-12)} / 2);
  background-color: var(--info-color);

  &.correct-bg {
    background-color: rgba(0, 216, 134, 0.6);
  }

  &.wrong-bg {
    background-color: rgba(255, 68, 79, 0.6);
  }

  .option-select {
    display: inline-block;
    width: var(--paper-unit-16);
    height: var(--paper-unit-16);
    background-color: var(--bg-color);
    border: 1px solid #{var(--border-color)};
    border-radius: 50%;
    margin-right: calc(#{var(--paper-unit-12)});
    box-sizing: content-box;
    cursor: pointer;
    flex-shrink: 0;
  }

  .option-lable {
    margin-right: 24rpx;
  }
}

.rich-text {
  display: inline-block;
  // pointer-events: none;
}

.primary-color {
  color: var(--primary-color);
}

.success-color {
  color: var(--success-color);
}

.warning-color {
  color: var(--warning-color);
}

.error-color {
  color: var(--error-color);
}

.info-color {
  color: var(--info-color);
}
</style>
